<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>

<head>
    <%@ include file="/include/head.jsp"%>
    <title></title>
    <link rel="stylesheet" href="${rootPath}/static/plugins/swiper/swiper-3.4.2.min.css">
    <style type="text/css">
        .footerMessage{
            position: fixed;
            box-sizing: border-box;
            height:44px;
            width:100%;
            bottom: 47px;
            z-index: 20;
        }
    </style>
    <script src="${rootPath}/static/plugins/swiper/swiper-3.4.2.jquery.min.js"></script>
    <script src="${rootPath}/static/js/shopcar.js"></script>
    <script>
        mui.init();
        //页面基础配置
        $(function(){

            //初始化购物车的vue作用域
            initShopCar({
                vueObj:"#vueShopCar",
                nextPage:"http://192.168.0.24:8088/wap/orderCheck.do"
            });
            //购物车页面不存在分页处理,所以需要单独初始化区域滚动
            mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0005
            });
        });
    </script>
</head>

<body>
<%@ include file="/include/footer-index.jsp"%>
<%--VUE作用域--%>
<div id="vueShopCar">
<!-- 主页面标题 -->
<header class="mui-bar mui-bar-nav qy-bg-white qy-border-bottom">
    <a class="mui-pull-left qy-text-black mui-icon" style="height: 44px;overflow: hidden;width: 54px;border-radius: 50%;padding-top: 5px;padding-bottom: 5px;">
        <img src="${rootPath}/static/imgs/indexUserTouxiang.png" style="width: 100%;" alt=""/>
    </a>
    <h1 class="mui-title">
        购物车
    </h1>
    <span class="mui-icon mui-pull-right qy-position-relative qy-flex qy-full-height shopcarEditHeaderBtn" style="font-size:16px;" v-if="!this.isedit" v-on:click="editAll">
        编辑
    </span>
    <span class="mui-icon mui-pull-right qy-position-relative qy-flex qy-full-height shopcarEditHeaderBtn" style="font-size:16px;" v-else v-on:click="editAll">
        完成
    </span>
</header>
<div class="footerMessage qy-bg-white qy-border-top mui-row qy-font-size-14px">
    <div class="mui-col-xs-1 qy-flex qy-full-height qy-flex-text-center">
        <div class="mui-checkbox">
            <input name="checkbox" value="" type="checkbox" v-bind:checked="this.isSelect" v-on:click="selectAll">
        </div>
    </div>
    <div class="mui-col-xs-9 qy-flex qy-flex-text-between qy-full-height ">
        <span>全选</span>
        <div class="qy-margin-vertical-8 qy-flex qy-flex-direction-column qy-flex-text-end">
            <div class="qy-flex-equalSpace">总额: ¥{{this.totalPrice}}</div>
            <div class="qy-flex-equalSpace qy-text-label">共{{this.totalSelect}}件商品,优惠{{this.totalDiscount}}元</div>
        </div>
    </div>
    <div class="mui-col-xs-2 qy-flex qy-full-height qy-flex-text-center qy-bg-warning qy-text-white qy-font-size-16px" v-on:click="goOrderCheck">
        结算({{this.totalSelect}})
    </div>
</div>
<div class="mui-content" tabNum="3">
    <div class="mui-fullscreen">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll" >
                <%--主体内容开始--%>
                <%--主体循环--%>
                <div class="qy-bg-white qy-margin-horizontal-8px" v-for="ele in arr">
                    <%--医院标题和操作按钮--%>
                    <div class="qy-flex qy-flex-fullHeight qy-padding-left-8px">
                        <div class="mui-col-xs-1 qy-flex qy-flex-text-center qy-padding-right-8px">
                            <div class="mui-checkbox">
                                <input name="checkbox" value="" type="checkbox" v-bind:checked="ele.isSelect" v-on:click="selectHospital(ele)">
                            </div>
                        </div>
                        <div class="mui-col-xs-11 qy-padding-right-8px qy-padding-horizontal-8px qy-flex qy-flex-text-between qy-border-bottom">
                            <small class="qy-text-black">{{ele.hospitalName}}</small>
                            <div class="qy-flex qy-text-label">
                                <span class="qy-font-size-16px qy-padding-vertical-8 qy-flex-equalSpace qy-border-right">
                                    领券
                                </span>
                                <span class="qy-font-size-16px qy-padding-vertical-8 qy-flex-equalSpace" v-if="!ele.isedit" v-on:click="editHospital(ele,ele.isedit)">
                                    编辑
                                </span>
                                <span class="qy-font-size-16px qy-padding-vertical-8 qy-flex-equalSpace" v-else v-on:click="editHospital(ele,ele.isedit)">
                                    完成
                                </span>
                            </div>
                        </div>
                    </div>
                    <%--医院套餐循环--%>
                    <div class="qy-padding-horizontal-8px qy-padding-left-8px qy-flex qy-flex-fullHeight" v-for="ele2 in ele.hospitalProduct">
                        <div class="mui-col-xs-1 qy-flex qy-flex-text-center qy-padding-right-8px">
                            <div class="mui-checkbox">
                                <input name="checkbox" value="" type="checkbox" v-bind:checked="ele2.isSelect" v-on:click="select(ele2,ele)">
                            </div>
                        </div>
                        <div class="mui-col-xs-9" v-if="!ele.isedit">
                            <a href="" class="qy-flex qy-flex-text-top mui-block">
                                <img style="max-height: 100px;max-width: 100px;" src="http://www.qydjk.org/resource/front/sho/image/product/20170620/2017062013052288021717.png" alt="">
                                <div class="qy-padding-vertical-8px ">
                                    <div class="qy-font-weight-bold qy-font-size-18px qy-text-black">
                                        {{ele2.productName}}
                                    </div>
                                    <div class="qy-padding-top-8px qy-text-red">
                                        <small>¥</small>
                                        <span class="qy-font-size-16px">{{ele2.nowPrice}}</span>
                                    </div>
                                    <div class="qy-text-label">
                                        <del class="qy-font-size-12px">¥{{ele2.oldPrice}}</del>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="mui-col-xs-9" v-else>
                            <div class="qy-flex qy-flex-text-top mui-block">
                                <img style="max-height: 100px;max-width: 100px;" src="http://www.qydjk.org/resource/front/sho/image/product/20170620/2017062013052288021717.png" alt="">
                                <div class="qy-padding-vertical-8px ">
                                    <div class="qy-font-weight-bold qy-font-size-18px qy-text-black">
                                        {{ele2.productName}}
                                    </div>
                                    <div class="numControl  qy-margin-top-16px ">
                                        <div class="qy-font-size-18px qy-full-height qy-flex qy-flex-fullHeight qy-flex-text-between">
                                            <span class="qy-text-label qy-padding-vertical-8px qy-flex qy-flex-text-center" v-on:click="countControl(false,ele2)">-</span>
                                            <span class="qy-flex qy-flex-text-center">{{ele2.count}}</span>
                                            <span class="qy-flex qy-padding-vertical-8px qy-flex-text-center" v-on:click="countControl(true,ele2)">+</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mui-col-xs-2">
                            <div class="qy-flex qy-flex-text-right qy-full-height qy-padding-right-8px" v-if="!ele.isedit">
                                 x{{ele2.count}}
                            </div>
                            <div class="qy-flex qy-flex-text-center qy-full-height qy-bg-red qy-text-white" v-else v-on:click="move(ele,ele2)">
                                删除
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

</body>

</html>